<template>
	<view class="container">


		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel" circular @change="swiperChange">
				<swiper-item class="carousel-item" v-for="(item,index) in img" :key="index">
					<image :src="item.image" mode="aspectFill" @click="linkUrl(item.url)" />
				</swiper-item>
			</swiper>
		
		
		</view>
		
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="optimization(item)" v-for="(item,index) in cateList" :key="item.id"
				v-if="index<(shop_id=='2651983721271552'?10:5)">
				<image :src="item.fullImageUrl" mode="aspectFit"></image>
				<text>{{item.cName}}</text>
			</view>
		</view>
		<view v-for="shop in shopSort" :key="shop.id">
			<!-- 优选 -->
			<view class="activity" v-if="shop.type == 1&&shop.goodslist.length>0">
				<view class="f-header">
					<view class="tit-box">
						<!-- <text class="line"></text> -->
						<text class="tit">{{shop.name}}</text>
						<!-- <text class="line"></text> -->
					</view>
				</view>
				<view class="goods-box">
					<view class="left">
						<view class="top" @click="navToDetailTopPage(shop.goodslist[0].pid,shop.goodslist[0].iShopId)">

							<image :src="shop.goodslist[0].defaultAlbum" mode="aspectFill"></image>
							<text class="timer">{{shop.goodslist[0].pName}}</text>
							<text class="price">￥{{shop.goodslist[0].fSalePrice}}</text>
						</view>
						<view class="bottom" v-if="shop.goodslist[1]"
							@click="navToDetailTopPage(shop.goodslist[1].pid,shop.goodslist[1].iShopId)">

							<image :src="shop.goodslist[1].defaultAlbum" mode="aspectFill"></image>
							<text class="timer">{{shop.goodslist[1].pName}}</text>
							<text class="price">￥{{shop.goodslist[1].fSalePrice}}</text>
						</view>
					</view>
					<view class="right">
						<view class="top" v-if="shop.goodslist[2]"
							@click="navToDetailTopPage(shop.goodslist[2].pid,shop.goodslist[2].iShopId)">
							<!-- <text class="hot">热销</text> -->
							<view class="t-box">
								<text class="timer">{{shop.goodslist[2].pName}}</text>
								<text class="price">￥{{shop.goodslist[2].fSalePrice}}</text>
							</view>

							<image :src="shop.goodslist[2].defaultAlbum" mode="widthFix"></image>

						</view>
						<view class="top" v-if="shop.goodslist[3]"
							@click="navToDetailTopPage(shop.goodslist[3].pid,shop.goodslist[3].iShopId)">
							<view class="t-box">
								<text class="timer">{{shop.goodslist[3].pName}}</text>
								<text class="price">￥{{shop.goodslist[3].fSalePrice}}</text>
							</view>

							<image :src="shop.goodslist[3].defaultAlbum" mode="widthFix"></image>
						</view>
						<view class="top" style="margin-bottom: 0;" v-if="shop.goodslist[4]"
							@click="navToDetailTopPage(shop.goodslist[4].pid,shop.goodslist[4].iShopId)">
							<!-- <text class="hot">热销</text> -->
							<view class="t-box">
								<text class="timer">{{shop.goodslist[4].pName}}</text>
								<text class="price">￥{{shop.goodslist[4].fSalePrice}}</text>
							</view>

							<image :src="shop.goodslist[4].defaultAlbum" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- Top单品 -->
			<view class="seckill-section m-t top-goods" v-if="shop.type == 4">
				<view class="s-header">
					<text class="title">{{shop.name}}</text>

				</view>
				<scroll-view class="floor-list" scroll-x>
					<view class="scoll-wrapper">
						<view v-for="(item, index) in topList" :key="item.pid" class="floor-item"
							@click="navToDetailTopPage(item.pid,item.iShopId)" v-if="index<8">
							<image :src="item.defaultAlbum" mode="aspectFill" class="white-img"></image>
							<!-- <image class="ranking" :src="setRanking(index)" mode="aspectFill"></image> -->
							<text class="ranking">{{index+1}}</text>
							<text class="title clamp">{{item.pName}}</text>
							<text class="price"><text class="unit">￥</text>{{item.fSalePrice}}</text>
						</view>
						<view class="floor-item">
							<text class="look-more" @click="top">查看更多&gt;</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 倒计时 -->
			<view class="times" v-if="shop.type == 3" @click="navToDetailTopPage(goodsDetail.id,goodsDetail.iShopId)">
				<image :src="goodsDetail.fullDefaultImageUrl" mode=""></image>
				<view class="text">
					<view class="co">
						<view class="ho">
							{{hours}}
						</view>
						<text>:</text>
						<view class="ho">
							{{minutes}}
						</view>
						<text>:</text>
						<view class="ho">
							{{seconds}}
						</view>
					</view>
					<view class="name">
						{{goodsDetail.cName}}
					</view>
					<view class="p">
						{{goodsDetail.cProductShowName}}
					</view>
					<view class="money">
						￥{{goodsDetail.fSalePrice}}
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="seckill-section m-t top-goods" v-if="shop.type == 8">
				<view class="s-header">
					<text class="title">{{shop.name}}</text>
				</view>
				<scroll-view class="floor-list" scroll-x>
					<view class="qu" v-for="c in coupon" :key="c.id" @click="takeCoupon(c)">
						<view class="l">
							<view class="money">
								{{c.reduce_amount}}<text>￥</text>
							</view>
							<view class="xian">
								满{{c.start_amount}}元可用
							</view>
						</view>
						<view class="r">
							立<br>即<br>领<br>取
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<Guess :goods_id_exclude='goods_id_exclude' :categoryid='categoryid' :type='type'
			v-if="goods_id_exclude.length>0&&categoryid.length>0"></Guess>

		<!-- 分享 -->
		<!-- <share ref="share" :contentHeight="900" :shareList="shareList"></share> -->
	</view>
</template>

<script>
	import Guess from "../like/guess.vue"
	import share from '../share';
	export default {
		components: {
			Guess,
			share
		},
		data() {
			return {
				hours: 0,
				minutes: 0,
				seconds: 0,
				titleNViewBackground: 'none',
				swiperCurrent: 0,
				categoryid: [],
				type: 0,
				swiperLength: 3,
				cateList: [],
				timer: null,
				shareList: [],
				goods_id_exclude: [],
				topList: [],
				shopSort: [],
				carouselList: [{
						src: "/static/img/1/17.png",
						background: "none",
					},
					{
						src: "/static/img/1/17.png",
						background: "none",
					},
					{
						src: "/static/img/1/17.png",
						background: "none",
					},
				],
				coupon: [],
				goodsDetail: {},
				limit: 5


			};
		},
		props: ['shop_id', "shop", "img"],
		mounted() {
			// this.loadData();
			let that = this
			let token = that.$SysCache.get('token');
			let iShopId = this.shop_id
			// this.$Request.get(
			// 	that.$api.httpApi.cate.cate + "&token=" + that.$SysCache.get('token') + "&iShopId=" + iShopId
			// ).then(res => {
			// 	if (res.code == 200) {
			// 		this.cateList = res.data
			// 	}
			// })



			that.$Request.post4(
				that.$api.httpApi.home.shopCategory, {
					shop_id: iShopId
				}
			).then(res => {
				if (res.code == 1) {
					this.cateList = res.data

					res.data.forEach(item => {
						if (item.status == 1) {
							this.categoryid.push(item.id)
						}

						//this.getcateImg(item)

					})
				}
			})

			// this.shareList = this.$api.json('shareList');
			//top单品
			let saleData = {
				queryCondition: {
					order: [{
						fieldname: "iOrder",
						direction: "asc"
					}],
					pageindex: 1,
					pagesize: 10,
					where: [{
						fieldname: "shop_id",
						valuefrom: this.shop_id
					}]
				}
			}
			this.$Request.post(this.$api.httpApi.home.getProductMainTopList, saleData).then(res => {
				if (res.code == 200) {
					this.topList = res.data.data
					res.data.data.forEach(item => {
						this.goods_id_exclude.push(item.pid)
					})

					// this.getGoods(res.data,3)
				}
			});
			let shopdata = {
				shop_id: this.shop_id
			}
			this.$Request.post4(this.$api.httpApi.home.shopindex, shopdata).then(res => {
				if (res.code == 1) {
					this.shopSort = res.data
					this.shopSort.forEach(item => {
						if (item.type == 1) {
							this.getTagGoods(item)
						}
						if (item.type == 3) {
							this.getActivity(item)
						}
					})
				}
			});
			this.getmycoupon()

			// this.timeDown()

		},

		methods: {
			getmycoupon() {
				let coupondata = {

					"pager": {
						"pageIndex": "1",
						"pageSize": "100",
						"totalPage": "",
						"totalCount": ""
					},
					"orders": [{
						"name": "create_time",
						"order": "desc"
					}],
					"conditions": [{
						"name": "member_scope_id",
						"value1": this.shop_id,
						"type": "string",
						"op": "eq"
					}]

				}
				this.$Request.post4(this.$api.httpApi.home.query, coupondata).then(res => {
					if (res.code == 1) {
						this.coupon = res.data

					}
				});
			},
			timeDown() { // 倒计时

				clearInterval(this.timer);
				var star = this.pStartDate;
				var end = this.pEndDate
				var starttime = new Date(this.goodsDetail.promotion.pStartDate.replace(/-/g, "/")) / 1000;
				var nowDate = Math.round(new Date() / 1000); // 当前时间
				//var endtime = Number(this.initActiveMsgObj.end_time); 
				var endtime = new Date(this.goodsDetail.promotion.pEndDate.replace(/-/g, "/")) / 1000;


				// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
				if (endtime < nowDate) {
					return
				}


				var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
				//天数
				var days = Math.floor(totalSeconds / (60 * 60 * 24));
				//取模（余数）
				var modulo = totalSeconds % (60 * 60 * 24);
				//小时数
				var hours = Math.floor(modulo / (60 * 60));
				hours = hours < 10 ? ('0' + hours) : hours;
				modulo = modulo % (60 * 60);
				//分钟
				var minutes = Math.floor(modulo / 60);
				minutes = minutes < 10 ? '0' + minutes : minutes;
				//秒
				var seconds = modulo % 60;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				//输出到页面

				this.hours = hours;
				this.minutes = minutes;
				this.seconds = seconds;

				//if(totalSeconds <= 0){
				if (totalSeconds <= 60) {
					clearInterval(this.timer);
					// window.location.reload()
				} else {
					this.timer = setInterval(this.timeDown, 1000);
				}
			},
			getActivity(item) {

				this.$Request.get(this.$api.httpApi.goods.iteminfo + '&id=' + item.goods_id + '&token=' + this.$SysCache
					.get(
						'token')).then(
					res => {
						if (res.code == 200) {
							this.goodsDetail = res.data
						}
					})
			},
			optimization(cate) {
				this.$SysCache.put('cate', cate, 864000)
				uni.navigateTo({
					url: `/pages/inner/optimization`
				})
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},

			//详情页
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			navToDetailTopPage(id, shop_id) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${shop_id}`
				})
			},
			top() {
				uni.navigateTo({
					url: `/pages/inner/top`
				})
			},
			discount() {
				uni.navigateTo({
					url: `/pages/inner/discount`
				})
			},
			getTagGoods(item) {
				this.$Request.post(
					this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
						queryCondition: {
							order: {
								fieldname: "iOrder",
								direction: "asc"
							},
							pageindex: 1,
							pagesize: 5,
							where: [{
								fieldname: "tag_id",
								valuefrom: item.connect_id
							}, {
								fieldname: "shop_id",
								valuefrom: this.shop_id
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
						this.$set(item, "goodslist", res.data.data)
					}
				})
			},
			takeCoupon(item) {
				let mid = ''
				if (this.$SysCache.get("userInfo")) {
					mid = this.$SysCache.get("userInfo").mid || this.$SysCache.get("userInfo").id
				}

				let coupondata = {
					"mid": mid,
					"coupon_id": item.id,
					"quantity": 1,
					"action_type": 1
				}
				this.$Request.post4(this.$api.httpApi.home.receive, coupondata).then(res => {
					if (res.code == 1) {
						if (res.data.length === 0) {
							uni.showToast({
								title: '优惠券数量不足',
								icon: 'none'
							})
						} else {
							this.getmycoupon()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					// if (res.code == 1) {
					// 	this.getmycoupon()
					// 	uni.showToast({
					// 		title:res.msg,
					// 		icon:'none'
					// 	})

					// }else{
					// 	uni.showToast({
					// 		title:res.msg,
					// 		icon:'none'
					// 	})
					// }
				});
			},
			linkUrl(url) {
				window.location.href = url
			}
		}

	}
</script>

<style lang="scss" scoped>
	.con {
		height: calc(100% - 108upx);
		background-color: #fff;

	}

	.footer {
		height: 111rpx;
		position: fixed;
		width: 100%;
		bottom: 0;

		.b {
			width: 100%;
			background-color: #000000;
			height: 111rpx;
			line-height: 111rpx;
			display: flex;
			text-align: center;

			.v {
				flex: 1;
				height: 111rpx;
				line-height: normal;

				image {
					display: block;
					margin: auto;
					width: 36rpx;
					height: 36rpx;
					margin-top: 24rpx;
					margin-bottom: 8rpx;
				}

				color: #fff;
				font-size: 20rpx;
				text-align: center;
			}

			.cv {
				position: relative;

				image {
					position: absolute;
					width: 86rpx;
					height: 86rpx;
					top: -42rpx;
					margin: auto;
					left: 0;
					right: 0;
				}

				text {
					display: block;
					padding-top: 60rpx;
				}
			}
		}
	}

	.times {
		width: 690rpx;
		margin: auto;
		background-color: #fff;
		padding-bottom: 25rpx;
		padding-top: 40rpx;
		margin-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 50rpx;

		.text {
			display: inline-block;
			vertical-align: middle;
			margin-left: 37rpx;

			.name {
				margin-top: 28rpx;
				font-size: 34rpx;
				font-family: CTBiaoSongSJ;
				font-weight: 400;
				color: #FF4267;
			}

			.p {
				margin-top: 6rpx;
				font-size: 22rpx;
				font-family: CTBiaoSongSJ;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.74);
			}

			.money {
				width: 156rpx;
				height: 43rpx;
				background: #FF3058;
				border-radius: 22rpx;
				margin-top: 37rpx;
				text-align: center;
				line-height: 43rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
			}

			.co {

				.ho {
					display: inline-block;
					vertical-align: middle;
					width: 48rpx;
					height: 42rpx;
					background: #000000;
					border-radius: 15rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				text {
					display: inline-block;
					vertical-align: middle;
					margin-left: 9rpx;
					margin-right: 9rpx;
					font-size: 40rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}
			}
		}

		image {
			display: inline-block;
			vertical-align: middle;
			width: 303rpx;
			height: 231rpx;
		}
	}




	page {
		position: relative;
		background: #EBEBEB;
		height: 100%;
	}

	.container {
		height: 100%;
		background-color: #fff;
		
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		overflow: hidden;
		padding: 30upx 22upx;
		margin-top: 60upx;

		// background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 23upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			// margin-right: 8%;
			margin-bottom: 20upx;
			width: 20%;

			&:last-child {
				margin-right: 0;
			}

			image {
				width: 92upx;
				height: 90upx;
			}

			text {
				white-space: nowrap;
			}
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 90upx;
			// height: 65upx;
			margin-bottom: 14upx;
			// border-radius: 50%;
			// opacity: .7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	.m-t {
		margin-top: 16upx;
	}

	/* 今日优选 */
	.seckill-section {
		padding: 4upx 30upx 24upx;

		.qu {
			display: inline-block;
			vertical-align: middle;
			width: 240rpx;
			height: 98rpx;
			background: #3E9B89;
			box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.08);
			margin-right: 23rpx;

			.l {
				display: inline-block;
				vertical-align: middle;
				width: 194rpx;
				height: 98rpx;
				background: linear-gradient(139deg, #A6D68C, #1AC2A4);
				box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.08);
				text-align: center;

				.money {
					font-size: 40rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 10rpx;

					text {
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.xian {
					font-size: 18rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.r {
				display: inline-block;
				vertical-align: middle;
				white-space: normal;
				width: 46rpx;
				height: 98rpx;
				background-color: #DD4361;
				text-align: center;
				font-size: 16rpx;
				padding-top: 8rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		// background: #fff;
		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.title {
				font-size: 30upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			margin-right: 28upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			width: 250upx;
			line-height: 1.8;
			border-radius: 6upx;
			position: relative;

			.bac-index {
				height: 250upx;
				width: 250upx;
			}

			.look-more {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 250upx;
				width: 250upx;
				background: #f0f0f0;
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
				color: #666;
			}

			.white-img {
				height: 250upx;
				width: 250upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

			}

			.title {
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
				font-size: 28upx;
			}

			.price {
				font-size: 26upx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: rgba(240, 64, 111, 1);
			}

			.new {
				position: absolute;
				top: 0;
				left: 0;
				width: 98upx;
				height: 32upx;
				background: rgba(77, 200, 151, 1);
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 32upx;
			}

			.ranking {
				position: absolute;
				top: 24upx;
				left: 13upx;
				width: 43upx;
				height: 43upx;
				background: rgb(206, 167, 109) !important;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 50%;

			}

		}
	}

	.over-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 503upx;
		z-index: 5;
		// filter: blur(3upx);
		border-bottom-left-radius: 50upx;
		border-bottom-right-radius: 50upx;
	}

	.toHead {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		height: 95rpx;
		z-index: 10;
		line-height: 95rpx;

		.r {
			width: 95rpx;
			height: 95rpx;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 108rpx;

			image {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.input {
			width: 548rpx;
			height: 56rpx;
			background: rgba(255, 255, 255, 0.34);
			display: inline-block;
			vertical-align: middle;
			margin-left: 6rpx;
			margin-right: 6rpx;
			line-height: normal;

			input {
				display: inline-block;
				height: 56rpx;
				width: calc(100% - 56rpx);
				vertical-align: middle;
				float: left;
				padding-left: 15rpx;
				color: #fff;
			}

			.bu {
				width: 56rpx;
				height: 56rpx;
				line-height: 56rpx;
				display: inline-block;
				vertical-align: middle;
				text-align: center;

				float: left;

				image {
					display: inline-block;
					width: 29rpx;
					height: 29rpx;
					vertical-align: middle;
				}
			}
		}

		.l {
			width: 95rpx;
			height: 95rpx;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 108rpx;

			image {
				display: inline-block;
				width: 21rpx;
				height: 39rpx;
			}
		}
	}

	.header-box {
		position: absolute;
		width: 100%;
		top: 180upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 26upx;
		z-index: 10;

		.header-img {
			width: 104upx;
			height: 104upx;
			border-radius: 20upx;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.header-info {
			width: 60%;
			color: #fff;

			.name {
				display: block;
				font-size: 29upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
			}

			.fans {
				display: block;
				font-size: 23upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
			}
		}

		.header-collect {
			width: 94upx;
			height: 53upx;
			border-radius: 30upx;
			display: inline-flex;
			text-align: right;
			justify-content: center;
			align-items: center;

			image {
				width: 26upx;
				height: 26upx;
				margin-right: 9upx;

			}

			font-size:23upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color: #fff;
			border: 2upx solid #fff;
		}
	}

	.tab-box {
		position: absolute;
		z-index: 10;
		width: 100%;
		top: 320upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 26upx;
		font-size: 23upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #fff;

		text {
			padding-bottom: 10upx;

		}

		.active {
			border-bottom: 2upx solid #fff;
		}

	}

	/*商品列表*/
	.goodslist {
		padding: 0 26upx;

		.list-item {
			background: #fff;
			padding: 26upx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 31upx;
			border-radius: 16upx;

			image {
				width: 370upx;
				height: 289upx;

			}

			.list-info {
				padding: 0 30upx;

				.name {
					display: block;
					font-size: 40upx;
					font-family: CTBiaoSongSJ;
					font-weight: 400;
					color: rgba(255, 66, 102, 1);

				}

				.desc {
					display: block;
					font-size: 25upx;
					font-family: CTBiaoSongSJ;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);

				}

				.price {
					width: 163upx;
					height: 45upx;
					background: rgba(255, 47, 87, 1);
					border-radius: 22upx;
					font-size: 25upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 33upx;
				}

			}

			.left {
				image {}
			}
		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;
		
		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 377upx;
			box-sizing: content-box;
		}
		
		
		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 856upx;
			transition: .4s;
		}
		.carousel {
			width: 702rpx;
			margin: auto;
			overflow: hidden;
			height: 856upx;
			position: relative;
			z-index: 10;
			top: 40upx;
		
			.carousel-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		
			image {
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
	}
	.carousel-sections{
		position: relative;
		padding: 0 33upx;
		.carousel {
			
			margin: auto;
			overflow: hidden;
			height: 333upx;
			position: relative;
			z-index: 10;
			
			.carousel-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		
			image {
				width: 100%;
				height: 100%;
				border-radius: 20upx;
			}
		}
	}
	

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}


	/* 活动优惠 */
	.activity {
		padding: 4upx 30upx 24upx;

		// background: #fff;
		.f-header {
			display: flex;
			align-items: center;
			height: 115upx;
			padding: 6upx 0 8upx;

			.tit-box {
				flex: 1;
				display: flex;
				// flex-direction: column;
				// justify-content: center;
				align-items: center;

				.tit {
					display: inline-block;
					font-size: 30upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(4, 0, 0, 1);
					margin: 0 10upx;
				}

				.line {
					display: inline-block;
					width: 15upx;
					height: 2upx;
					background: rgba(102, 102, 102, 1)
				}
			}


		}

		.goods-box {
			display: flex;

			.left {
				width: 274upx;
				margin-right: 20upx;
				display: flex;
				flex-wrap: wrap;

				.top {
					width: 100%;
					height: 352upx;
					margin-bottom: 20upx;
					// position: relative;
					display: flex;
					flex-direction: column;
					background: #fff;
					// justify-content: center;
					align-items: center;
					border-radius: 20upx 0upx 0upx 0upx;
					padding: 20upx 0;
					box-shadow: 0upx 0upx 5upx 5upx #eee;

					.timer {

						color: #333 !important;
						// position: absolute;
						z-index: 1;
						font-size: 26upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 229upx;
						line-height: 35upx;
						margin-top: 10upx;
					}

					.price {
						width: 229upx;
						font-size: 26upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #FF0000;
						line-height: 35upx;
					}

					image {
						width: 229upx;
						height: 229upx;
						border-radius: 20upx;
					}
				}

				.bottom {
					width: 100%;
					// height: 403upx;
					//margin-bottom: 17upx;
					// position: relative;
					display: flex;
					flex-direction: column;
					background: #fff;
					height: 352upx;
					// justify-content: center;
					align-items: center;
					border-radius: 0upx 0upx 0upx 20upx;
					padding: 20upx 0;
					box-shadow: 0upx 0upx 5upx 5upx #eee;

					.timer {

						color: #333 !important;
						// position: absolute;
						z-index: 1;
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 229upx;
						line-height: 35upx;
						margin-top: 10upx;
					}

					.price {
						width: 229upx;
						font-size: 26upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #FF0000;
						line-height: 35upx;
					}

					image {
						width: 229upx;
						height: 229upx;
						border-radius: 20upx;
					}
				}
			}

			.right {
				// width: 343upx;
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: space-between;
				width: 390upx;
				background: #FFFFFF;

				.top {
					width: 100%;
					height: 227upx;
					margin-bottom: 10upx;
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;
					padding: 20upx;
					border-radius: 0px 20upx 0px 0px;

					box-shadow: 0upx 0upx 5upx 5upx #eee;

					.t-box {
						display: flex;
						flex-direction: column;
						width: 142upx;

						.timer {
							font-size: 28upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #222222;
							line-height: 35upx;
							// padding: 10upx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							margin-bottom: 10upx;
						}

						.price {
							font-size: 26upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #FF0000;
							line-height: 35upx;
						}

						.hot {
							font-size: 18upx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(4, 0, 0, 1);
							position: absolute;
							top: 26upx;
							left: 26upx;
							z-index: 1;
							width: 45upx;
							height: 26upx;
							background: rgb(240, 64, 111);
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
						}


					}

					image {
						width: 168upx;
						height: 172upx;
						border-radius: 20upx;
					}

					&:nth-child(2) {
						border-radius: 0;
					}

					&:last-child {
						border-radius: 0px 0upx 20upx 0px;
					}
				}

				.bottom {
					width: 100%;
					height: 198upx;
					position: relative;
					margin-bottom: 14upx;

					.timer {
						font-size: 19upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(4, 0, 0, 1);
						position: absolute;
						bottom: 36upx;
						left: 26upx;
						z-index: 1;
					}

					.hot {
						font-size: 18upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(4, 0, 0, 1);
						position: absolute;
						top: 26upx;
						left: 26upx;
						z-index: 1;
						width: 45upx;
						height: 26upx;
						background: rgb(240, 64, 111);
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	

</style>
